<template>  
  <div>  
    <el-segmented v-model="selectedValue" :options="options">  
      <template #default="{ item }">  
        <div class="flex flex-col items-center gap-2 p-2">  
          <div>{{ item.label }}</div>  
        </div>  
      </template>  
    </el-segmented>  
  </div>  
  <div class="my" v-if="selectedValue === 'mypay'">  
	<div class="text">
		<div class="name">
			用户名：{{inf.name}}
		</div>
		<div class="balance">
			<div style="display: flex;">余额：{{inf.balance}}元</div>
			<div v-if="inf.balance < props.price" class="insufficient-balance">余额不足请充值</div>
		</div>
	</div>
     <div class="img1">
     	<img :src="purse" alt="Logo Icon" class="purse-img" /> 
     </div>
  </div>  
  <div class="wechat" v-if="selectedValue === 'WeChat'">  
    <div class="des">
		请扫描下图二维码进行微信支付
	</div> 
	<div class="img">
		<img :src="code" alt="Logo Icon" class="code-img" /> 
	</div>
  </div>  
	<div class="wechat" v-if="selectedValue === 'paybaby'">  
    <div class="des">
		请扫描下图二维码进行支付宝支付
	</div> 
	<div class="img">
		<img :src="code" alt="Logo Icon" class="code-img" /> 
	</div>
  </div> 
</template>  
  
<script setup>  
import { ref } from 'vue'  
import { Path } from "@/constant/index"
import { get,post } from "@/plugins/axios"
const props = defineProps(["price","goodOfUserId"])
import code from '@/components/components-zjm/code.jpg'; 
import purse from '@/components/components-zjm/purse.png'; 
const selectedValue = ref('mypay') // 初始值可能需要根据实际情况调整  
const inf=ref(
	{
	 name:null,
	 balance:null,
	}); 
const options = [  
  {  
    label: '我的钱包',  
    value: 'mypay',  
  },  
  {  
    label: '微信支付',  
    value: 'WeChat',  
  },  
	 {  
    label: '支付宝支付',  
    value: 'paybaby',  
  },
]  
getMyCount()
function getMyCount(){
	get(Path.userGetAccount,{
	},content => {
		inf.value.name = content.name
		inf.value.balance = content.account
	})
}
</script>  
  
<style scoped lang="scss">  
.my{
	display: flex;
	height: 260px;
	width: 650px;
	
	.text{
		.name{
			width: 250px;
			margin-top: 20%;
			margin-left: 10%;
			font-size: 30px;
		}
		.balance{
			width: 180px;
			margin-top: 10%;
			margin-left: 10%;
			font-size: 30px;
			.insufficient-balance {  
			  color: red;  
			  font-size: 20px;  
			  margin-top: 10px;  
			}  
		}
	}
	background-color:white;
	.purse-img{
		width: 280px;
		height: auto;
		margin-left:50% ;
		margin-top: 10%;
	}
}
.wechat{
	height: 260px;
	width: 650px;
	background-color: white;
	text-align: center;
	.des{
		font-size: 22px;
	}
	.code-img{
		width: 190px;
		height: 190px;
		margin-top: 3%;
	}
	
}
</style>